<template>
	<view>
		<!--收款账户-->
		<view class="ma-20 pa-20 bg-fff b-r-15">
			<view class="flex f-center pa-tb-20">
				<view class="w10vh tn-text-md">分类</view>
				<view class="ma-l-20 tn-text-md">
					<tn-radio-group v-model="categorytype" activeColor="#fbbd12">
						<tn-radio borderColor="#fbbd12" v-for="(item, index) in categorylist" :key="index"
							:name="item.name" :disabled="item.disabled">
							{{item.name}}
						</tn-radio>
					</tn-radio-group>

				</view>
			</view>
			<block v-if="categorytype=='个人'">
				<view class="flex f-center pa-tb-20 b-t-1-F5">
					<view class="w10vh tn-text-md">账户类型</view>
					<view class="ma-l-20 tn-text-md">
						<tn-radio-group v-model="type" activeColor="#fbbd12">
							<tn-radio @change="radioChange" borderColor="#fbbd12" v-for="(item, index) in list" :key="index"
								:name="item.name" :disabled="item.disabled">
								{{item.name}}
							</tn-radio>
						</tn-radio-group>

					</view>
				</view>
				<view class="flex f-center b-t-1-F5 pa-tb-10">
					<view class="w10vh">姓名</view>
					<view class="ma-l-20 tn-text-md"><tn-input v-model="name" placeholder="请输入姓名" /></view>
				</view>
				<view class="flex f-center pa-tb-10" v-show="type=='银行卡'">
					<view class="w10vh">开户银行</view>
					<view class="ma-l-20 tn-text-md"><tn-input v-model="bankname" placeholder="请输入开户银行" /></view>
				</view>
				<view class="flex f-center pa-tb-10" v-show="type=='银行卡'">
					<view class="w10vh">银行卡号</view>
					<view class="ma-l-20 tn-text-md"><tn-input v-model="bankcard" placeholder="请输入银行卡号" /></view>
				</view>
				<view class="flex f-center pa-tb-10" v-show="type=='微信支付'">
					<view class="w10vh">微信号</view>
					<view class="ma-l-20 tn-text-md"><tn-input v-model="wx_number" placeholder="请输入微信号" /></view>
				</view>
				<view class="flex f-center pa-tb-10" v-show="type=='支付宝'">
					<view class="w10vh">支付宝账号</view>
					<view class="ma-l-20 tn-text-md"><tn-input v-model="zfb_number" placeholder="请输入支付宝账号" /></view>
				</view>
			</block>
			<block v-if="categorytype=='企业'">
				 
				<view class="flex f-center pa-tb-10 b-t-1-F5">
					<view class="w10vh">企业</view>
					<view class="ma-l-20 tn-text-md"><tn-input v-model="channel.company_name" disabled placeholder="请输入企业名称" /></view>
				</view>
				<view class="flex f-center pa-tb-10 b-t-1-F5">
					<view class="w10vh">信用代码</view>
					<view class="ma-l-20 tn-text-md"><tn-input v-model="channel.business_license" disabled placeholder="请输入信用代码" /></view>
				</view>
				<view class="flex f-center pa-tb-10 b-t-1-F5">
					<view class="w10vh">开户银行</view>
					<view class="ma-l-20 tn-text-md"><tn-input v-model="bankname" placeholder="请输入开户银行" /></view>
				</view>
				<view class="flex f-center pa-tb-10 b-t-1-F5">
					<view class="w10vh">银行卡号</view>
					<view class="ma-l-20 tn-text-md"><tn-input v-model="bankcard" placeholder="请输入银行卡号" /></view>
				</view>
			 
			</block>
		</view>
		<view class="ma-20 pa-lr-20 pa-tb-30 bg-fff b-r-15 flex f-between" @click="selectShow=true">
			<view class="flex">
				<view class="w10vh">适用故事</view>
				<view class="ma-l-20 tn-text-md">{{goodsname}}</view>
			</view>
			<view class="tn-icon-right c-aaa"></view>
		</view>
		<!-- 商品 -->
		<tn-select v-model="selectShow" mode="single" :list="selectList"
			@confirm="selectConfirm"></tn-select>
			
		<view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center pa-t-100">
			<tn-button backgroundColor="#fbbd12" height="90rpx" padding="40rpx 0" width="90%" fontBold @click="edit" shape="round">
				<text class="tn-icon-plane-fill tn-padding-right-xs tn-color-white"></text>
				<text class="tn-color-white">保存</text>
			</tn-button>
		</view>
		<tn-popup v-model="codeshow" mode="bottom" height="80%" :closeBtn="true">
			<view class="pa-t-100 t-center">请输入验证码</view>
			<view class="t-center tn-text-md tn-color-gray pa-t-10">已发送至 +86 158****1758</view>
			<view class="tn-bg-white pa-t-40">
				<tn-verification-code-input @finish="btnsubmit" v-model="code" :maxLength="6"></tn-verification-code-input>
			</view>
			<view @click="getCode()" class="pa-t-30 ma-l-40 pa-l-40 t-underline">{{code_tips}}</view>
		</tn-popup>
		<!-- 验证码倒计时 -->
		<tn-verification-code ref="code" :seconds="60" @change="codeChange"></tn-verification-code>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				selectShow:false,
				selectList: [{
						label: '醇香麦芽精酿啤酒',
						value: 1
					},
					{
						label: '冰萃冷泡果味茶',
						value: 2
					},
					{
						label: '蜜桃乌龙风味汽水',
						value: 2
					}
				],
				goodsname:"请选择账户关联的故事",
				goodsid:"",
				categorylist: [{
						name: '个人',
						disabled: false
					},
					{
						name: '企业',
						disabled: false
					}
				],
				categorytype: "个人",
				list: [{
						name: '银行卡',
						disabled: false
					},
					{
						name: '微信支付',
						disabled: false
					},
					{
						name: '支付宝',
						disabled: false
					}
				],
				type: "银行卡",
				name: "",
				wx_number: "",
				zfb_number: "",
				bankname: "",
				bankcard: "",
				company_name: "", //企业名称
				credit_code: "", //信用代码
				code:"",
				codeshow:false,
				code_tips: '获取验证码',
				channel:{}
			}
		},
		mounted() {
			_this = this;
			// _this.getload();
			// _this.getChannel();
		},
		methods: {
			getChannel(){
				var ivo =new Ivo("getChannelAgentApplyDetailAtMiniApp");
				_this.$EngineV2.action(ivo, ovo => {
					_this.channel=ovo.result.data.agent_detail_base;
					console.log("渠道信息",ovo)
				})
			},
			getload(){
				var ivo =new Ivo("getChannelCommissionAccountAtMiniApp");
				_this.$EngineV2.action(ivo, ovo => {
					var data=ovo.result.data.wallet_withdrawal_channel;
					if(data){
						if(data.channel_type=="BANK_CARD"){
							_this.name=data.bank_account_name;
							_this.bankname=data.bank_name;
							_this.bankcard=data.bank_account_no;
						}
						if(data.channel_type=="WECHAT_PAY"){
							_this.name=data.wechat_pay_name;
							_this.wx_number=data.wechat_no;
						}
						if(data.channel_type=="ALIPAY"){
							_this.name=data.alipay_name;
							_this.zfb_number=data.alipay_no
						}
						_this.type=data.channel_type=="BANK_CARD"?"银行卡":data.channel_type=="WECHAT_PAY"?"微信支付":data.channel_type=="ALIPAY"?"支付宝":""
					}
				})
			},
			edit(){
				var ivo =new Ivo("editChannelCommissionAccountAtMiniApp");
				
				//银行
				if(_this.type=="银行卡"){
					ivo.set("bank_account_name",_this.name);
					ivo.set("channel_type", "BANK_CARD");//BANK_CARD银行ALIPAY支付宝WECHAT_PAY微信
					ivo.set("bank_name", _this.bankname);
					ivo.set("bank_account_no", _this.bankcard);
				}
				//微信
				if(_this.type=="微信支付"){
					ivo.set("wechat_pay_name",_this.name);
					ivo.set("channel_type", "WECHAT_PAY");//BANK_CARD银行ALIPAY支付宝WECHAT_PAY微信
					ivo.set("wechat_no", _this.wx_number);
				}
				//支付宝
				if(_this.type=="支付宝"){
					ivo.set("alipay_name",_this.name);
					ivo.set("channel_type", "ALIPAY");//BANK_CARD银行ALIPAY支付宝WECHAT_PAY微信
					ivo.set("alipay_no", _this.zfb_number);
				}
				_this.$EngineV2.action(ivo, ovo => {
					_this.utilAlert.showInfo("提交成功",1000)
					setTimeout(() => {
						_this.utilNav.navigateBack(1);
					}, 1000)
				})
			},
			// 点击选择器
			selectConfirm(event) {
				_this.goodsname = `${event[0]['label']}`;
				_this.goodsid=`${event[0]['value']}`;
				console.log("event", event)
			},
			// 验证码倒计时时间改变
			codeChange(text) {
				this.code_tips = text;
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				console.log(e);
			},
			btnsubmit(){
				console.log("验证码"+_this.code);
				_this.codeshow=false;
				_this.$tn.message.toast('请求成功')
			},
			// 获取验证码
			getCode() {
				if (this.$refs.code.canGetCode) {
					this.$tn.message.loading('正在获取验证码')
					setTimeout(() => {
						this.$tn.message.closeLoading()
						this.$tn.message.toast('验证码已经发送')
						// 通知组件开始计时
						this.$refs.code.start()
					}, 2000)
				} else {
					this.$tn.message.toast(this.$refs.code.secNum + '秒后再重试')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.w10vh {
		width: 12vh;
		
	}

	/deep/.tn-text-md .tn-radio__label,
	/deep/ .uni-input-placeholder,
	/deep/.uni-input-input {
		font-size: 28rpx;
	}
	.tn-popup{
		z-index: 9 !important;
	}
</style>